<template>
	<view class="h-full text-white">
		<lz-navbar :title="$t('register.home')" :autoBack="true" leftIcon="arrow-left"></lz-navbar>
		<view class="mt-10 p-6">
			<view class="text-2xl">{{$t('register.zhuceyouxiang')}}</view>
			<view class="py-2" style="color: #999999;">{{$t('register.ljzhucekqn')}}</view>
			<view class="text-base">{{$t('login.youxiang')}}</view>
			<view class="p-2 rounded-sm my-4" style="background-color: #242424;">
				<u--input :placeholder="$t('login.qingshuryx')" border="none" color="#fff"
					v-model="form.email"></u--input>
			</view>
			<view class="text-base">{{$t('register.tuxingyanzheng')}}</view>
			<view class="my-4 flex items-center justify-between">
				<view class="p-2 rounded-sm" style="background-color: #242424;">
					<u--input :placeholder="$t('register.tuxingyanzheng')" border="none" color="#fff"
						v-model="form.image"></u--input>
				</view>
				<image style="width: 200rpx;height: 38px;" src="/static/images/wode/6.png"></image>
			</view>
			<view class="text-base">{{$t('register.yanzhengma')}}</view>
			<view class="my-4 flex items-center justify-between gap-1">
				<view class="p-2 rounded-sm" style="background-color: #242424;">
					<u--input :placeholder="$t('register.yanzhengma')" border="none" color="#fff"
						v-model="form.code"></u--input>
				</view>
				<u-button :text="$t('register.huoquyanzhengma')" color="#242424" style="width: 200rpx;"></u-button>
			</view>
			<view class="text-base">{{$t('login.mima')}}</view>
			<view class="p-2 rounded-sm my-4" style="background-color: #242424;">
				<u--input :placeholder="$t('login.qingshurmima')" border="none" color="#fff" v-model="form.password"
					type="password"></u--input>
			</view>
			<view class="text-base">{{$t('register.querenmima')}}</view>
			<view class="p-2 rounded-sm my-4" style="background-color: #242424;">
				<u--input :placeholder="$t('register.querenmima')" border="none" color="#fff"
					v-model="form.aginpassword" type="password"></u--input>
			</view>
			<view class="text-base">{{$t('register.tikuanmima')}}</view>
			<view class="p-2 rounded-sm my-4" style="background-color: #242424;">
				<u--input :placeholder="$t('register.qingtxtkmm')" border="none" color="#fff"
					v-model="form.tikuanPassword" type="password"></u--input>
			</view>
			<view class="text-base">{{$t('register.jigoumabt')}}</view>
			<view class="p-2 rounded-sm my-4" style="background-color: #242424;">
				<u--input :placeholder="$t('register.qingtianxjgm')" border="none" color="#fff"
					v-model="form.jgm"></u--input>
			</view>
			<view class="flex">
				<u-checkbox-group v-model="agree" placement="column" @change="checkboxChange" activeColor="#f05319">
					<u-checkbox  :name="true"></u-checkbox>
				</u-checkbox-group>
				<view class="text-xs flex">
					<view>{{$t('register.ningyitongyi')}}</view>
					<view class="red">{{$t('register.yonghuxieyi')}}</view>
					<view>{{$t('register.bingliaojiewm')}}</view>
					<view class="red">{{$t('register.yinsixieding')}}</view>
				</view>
			</view>
			<view class="py-4">
				<u-button :text="$t('register.home')" shape="circle" @click="registerFn"></u-button>
			</view>
			<view class="flex justify-center">
				<view style="color: #999999;">{{$t('register.yiyouzhanghao')}}</view>
				<navigator url="/pages/template/login/login">{{$t('register.lijidenglu')}}</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		data() {
			return {
				form: {
					email: '',
					image: '', // 图形验证
					code: '', // 验证码
					password: '', // 密码
					aginpassword: '', // 密码
					tikuanPassword: '', // 提款密码
					jgm: '', // 机构码
				},
				agree:[],
			}
		},
		onLoad(op) {},
		methods: {
			registerFn() {
				if (!this.form.email) {
					this.showMsg(this.$t('login.qingshuryx'))
					return
				}
				if (!this.agree[0]) {
					this.showMsg(this.$t('register.qingyuedubingtyxd'))
					return
				}
				if (!this.image) {
					this.showMsg(this.$t('register.tuxingyanzheng'))
					return
				}
				if (!this.code) {
					this.showMsg(this.$t('register.yanzhengma'))
					return
				}
				
			},
			showMsg(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},
			checkboxChange(e){
				console.log(e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-checkbox__icon-wrap--square{
		border-radius: 100%!important;
	}

</style>